<template>
  <view :class="['cardstyle', isTop ? 'top-card' : 'normal-card']">
    <slot name="header"></slot>
    <text class="titlebox">{{ title }}</text>
    <view class="tipsbox">
      <text style="color: #f00;" v-if="isTop">置顶</text>
      <text>{{ author }}</text>
      <text>{{ comments }}评</text>
      <view style="flex:1; display: flex; justify-content: flex-end;">
        <text>{{ time }}</text>
      </view>
    </view>
    <slot name="tips"></slot>
    <slot name="footer"></slot>
  </view>
</template>

<script>
export default {
  name: "CardViewText",
  props: {
    title: { type: String, required: true },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: "" },
    comments: { type: Number, default: 0 },
    time: { type: String, default: "" }
  }
};
</script>

<style scoped>

.cardstyle {
  padding: 10rpx;
  margin: 10rpx;
  border-radius: 8rpx;
}

.top-card {
  background-color: #fff8e6;
}

.normal-card {
  background-color: #f9f9f9; 
}
.titlebox {
  font-size: 32rpx;
  font-weight: bold;
  margin: 10rpx 0;
  display: block;
}
.tipsbox {
  font-size: 24rpx;
  color: #888;
  display: flex;
  flex-wrap: wrap;
}
.tipsbox text {
  margin-right: 20rpx;
}
</style>
